<template>
  <div class="goods-chat">
    <div class="chat-top">
      <!-- 个人详情 -->
      <van-nav-bar>
        <template #left>
          <van-icon v-if="!fromGoods" size="30" name="arrow-left" @click="goBack"/>
          <van-icon v-else name="cross" size="20" @click="cancel"/>
          <div class="user-avater">
            <van-image
              round
              fit="cover"
              width="2rem"
              height="2rem"
              :src="domain + detail.portrait"
            />
            <span class="nick">{{detail.creatorNick}}</span>
          </div>
        </template>
      </van-nav-bar>
    <!-- 商品详情 -->
      <div class="goods-grid" v-if="!fromGoods">
        <div class="goods-info">
          <div class="flex flex-justify-content-between">
            <div class="goods-price">{{ detail.creatorNick }}</div>
          </div>
          <div class="goods-title text-ellipsis-2">{{ detail.name }}</div>
          <div class="user-info mt5">
            <span>{{ detail.price | num2Money }} KZ</span>
          </div>
        </div>
        <van-icon name="arrow" size="30" @click="handleDetail"/>
      </div>
    </div>
    <!-- 商品留言 -->
    <div class="chat-content" v-if="!fromGoods">
        <!-- <div class="name">留言人名称</div> -->
        <div class="chat-list" id='chatList'>
          <div v-for="(item,index) in chatList" :key="index">
              <div class="chat-inner-me" v-if="item.senderName === user.username">
                  <div style="max-width:80%">
                      <div class="text">
                        <span>
                          {{item.messageContent}}
                        </span>
                        <!-- <van-icon name="chat" />-->
                      </div>
                      <div style="color:#666;font-size:12px;margin-top:5px">{{item.createTime.substring(5)}}</div>
                  </div>
              </div>
              <div class="chat-inner-other" v-if="item.senderName !== user.username">
                  <div style="max-width:80%">
                      <div class="text">
                        <span>
                          {{item.messageContent}}
                        </span>
                        <!-- <van-icon name="chat-o" />-->
                      </div>
                      <div style="color:#666;font-size:12px;margin-top:5px">{{item.createTime.substring(5)}}</div>
                  </div>
              </div>
          </div>
        </div>
        <div class="send">
          <div class="send-message">
            <van-field
              v-model="messageContent"
              :rows="1"
              type="textarea"
              placeholder="Por favor, digite uma mensagem"
            />
          </div>
          <div class="send-button"><van-button square icon="share" type="primary" size="mini" @click="sendMsg"></van-button></div>
        </div>
    </div>
    <div class="chat-content" v-else style="background-color:#fff;padding: 20px">
        <div class="send2">
          <div class="send-message" style="border-radius: 8px;overflow: hidden">
            <van-field
              v-model="messageContent"
              :rows="6"
              type="textarea"
              placeholder="Por favor, digite uma mensagem"
              style="background-color:#f2f2f2;"
            />
          </div>
          <div class="send-button"><van-button square type="primary" @click="sendMsg" style="width: 100%;border-radius: 8px;margin-top: 10px">Enviar</van-button></div>
        </div>
    </div>
  </div>
</template>
<script>
import Api from "@/api";
import { Domain } from "@/constants";
export default {
  name: 'Chat',
  props:{
    supplyId:{
      type:String,
      default:""
    },
    channelId:{
      type:String,
      default:""
    },
    fromGoods:{
      type:Boolean,
      default:false
    },
    receiver:{
      type:Object,
      default:()=>{}
    },
  },
  data() {
    return {
      list: [],
      domain: Domain,
      detail: {},
      chatList:[],
      submitObj:{
        channelId:null,
        senderCode:"",
        senderName:"",
        senderImg:"",
        receiverCode:"",
        receiverName:"",
        receiverImg:"",
        messageContent:"",
        supplyId:"",
        supplyName:"",
        supplyImage:"",
      },
      user:{},
      messageContent:""
    };
  },
   created() {
    this.submitObj.supplyId = this.supplyId;
    this.loadDetail();
    this.loadUserInfo();
    if(!this.fromGoods){
      this.getChatList()
    }
  },
  mounted(){
    if(!this.fromGoods){
      let chatWindow = document.getElementById('chatList')
      chatWindow.scrollTop = chatWindow.scrollHeight
    }

  },
  methods:{
    getChatList(){
      Api.messageList({pageNo:1,pageSize:50,channelId:this.channelId}).then(res=>{
        this.chatList = res.records.reverse()
      })
    },
    loadDetail() {
      const params = { id: this.submitObj.supplyId };
      Api.goodsDetail(params).then((res) => {
        this.detail = res;
        this.detail.imgs = res.imgList ? JSON.parse(res.imgList) : [];
        this.submitObj.supplyImage = this.detail.imgs.length > 0 ? this.detail.imgs[0] : "";
        this.submitObj.supplyName = this.detail.name;
        // 判断接收方来自于 商品信息 还是 对话列表
        if(this.fromGoods === true){
          this.submitObj.receiverCode = this.detail.createBy;
          this.submitObj.receiverName = this.detail.username;
          this.submitObj.receiverImg = this.detail.portrait;
        }else{
          this.submitObj.receiverCode = this.receiver.askId;
          this.submitObj.receiverName = this.receiver.askName;
          this.submitObj.receiverImg = this.receiver.askImg;
          this.submitObj.channelId = this.channelId;
        }

      });
    },
    // 获取用户
     loadUserInfo() {
      Api.loadUser().then((res) => {
        this.user = res
        this.submitObj.senderName = res.username;
        this.submitObj.senderCode = res.id;
        this.submitObj.senderImg = res.avatar;
      });
    },
    goBack(){
      this.$router.go(-1)
    },
    cancel(){
      this.$emit('cancel',false)
    },
    // 去商品详情页面
    handleDetail() {
      this.$router.push({path: "/detail", query: {id: this.submitObj.supplyId}});
    },
    sendMsg(){
      if(this.messageContent !== ""){
        this.submitObj.messageContent = this.messageContent
        this.messageContent = ""
        Api.sendMessage(this.submitObj).then(res=>{
          this.chatList.push(res)
          this.$emit('cancel',false)
        })
      }else{
        return false
      }
    }
  }
};
</script>
<style scoped lang="scss">
.goods-chat{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
::v-deep.van-nav-bar{
  background-color: #fff;
  padding: 10px;
  .van-nav-bar__left{
    padding-left: 0;
  }
}
.user-avater{
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.nick{
  margin-left: 15px;
  font-weight: bold;
}
.chat-top{
   .goods-grid {
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    .goods-image-out{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30%;
      height: calc(30vw - 18px);
    }
    .goods-image {
      width: 90%;
      height: 80%;
      position: relative;
      background-color: #999;
      border-radius: 4px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;

      }
      .tag {
        position: absolute;
        left: 0;
        bottom: 0;
        background: #fb8c24;
        color: #fff;
        font-size: 14px;
        padding: 3px 5px;
      }
    }
    .goods-info {
      padding: 8px;
      box-sizing: border-box;
      .goods-title {
        color: #595959;
        font-size: 14px;
        height: 20px;

        margin-top: 5px;
      }
      .goods-price {
        color: #333;
        font-size: 14px;

      }
      .user-info {
        font-size: 12px;
        font-weight: bold;
        color: #333;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
.chat-content{
    flex: 1;
    background-color: #f5f5f5;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 80px;
    .chat-list{
        flex: 1;
        overflow-y: auto;
        padding: 15px 10px;
        .chat-inner-me{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-right: 5px;
            margin-bottom: 10px;
            width: 100%;
            .text{
                font-size: 14px;
                margin-right: 5px;
                color: #fff;
                background-color: #fb8c24;
                border-radius: 4px;
                padding:10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span{
                  margin-right: 10px;
                }
            }
        }
        .chat-inner-other{
            margin-left: 5px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 10px;
            width: 100%;
            .text{
                font-size: 14px;
                color: #fb8c24;
                background-color: #fff;
                border-radius: 4px;
                padding:10px;
                border: 1px solid #fb8c24;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span{
                  margin-right: 10px;
                }
            }
        }

    }
    .send{
      width: 100%;
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
    }
    .send-message{
      flex: 1;
    }
    .send-button{
      margin-right: 10px;
      .van-button--primary{
        background-color: #fb8c24;
        border: none;
        padding: 10px;
      }
    }
    .send2{
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      .send-button{
        text-align:right;
        margin-top: 10px;
        margin-right: 0;
      }
    }
  }


</style>
